<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import SubmitBtn from '@/components/SubmitBtn.vue'
import uploadFile from '@/components/upload/index.vue'
import { uploadImgUrl } from '@/common/config.js'
import { logisticePlanPeriod } from '@/apis/dict.js'

const formData = ref({
  planname: "", // 计划名称
  billno: "", // 单据号
  expectdate: "",
  period: "", // 时间段
  memo: "", // 备注内容
})

// 初始化上传地址
const action = ref("")

onLoad(options => {
  if (!options.data) return
  const data = JSON.parse(options.data)
  uni.setNavigationBarTitle({ title: '编辑' })
  formData.value = { ...data }
  // 编辑模式下设置上传地址
  action.value = uploadImgUrl(data.id)
  // 文件数据获取由upload组件内部处理，无需在此处调用
})


// 获取时间段数据
const periodShow = ref(false)
const periodList = ref([])
const perioDefaultValue = ref([0])
const perioName = ref("")
const getDate = async () => {
  const res = await logisticePlanPeriod()
  periodList.value = res.data.map(item => {
    return {
      value: item.dictValue,
      label: item.dictLabel
    }
  })
  if (formData.value.id) {
    perioName.value = res.data.filter(item => item.dictValue == formData.value.period)[0].dictLabel
    perioDefaultValue.value = res.data.findIndex(item => item.dictValue == formData.value.period)
  }
}
const confirmPeriod = (val) => {
  formData.value.period = val[0].value
  perioName.value = val[0].label
}
getDate()

const selectDateShow = ref(false)
const handlerConfirmDate = (val) => {
  const { day, month, year } = val
  formData.value.expectdate = `${year}-${month}-${day}`
}

const confing = {
  api: '/logistics/outplan',
  isCustid:true,
  requiredFields: [{
    key: 'planname',
    name: '计划名称',
  },
  {
    key: 'expectdate',
    name: '预计提货时间',
    type: 'select'
  },
  {
    key: 'period',
    name: '时间段',
    type: 'select'
  }
  ]
}

</script>

<template>
  <view class="carinfo page_container">
    <view class="content">
      <u-form :model="formData" label-width="200">
        <u-form-item label="计划名称:" required>
          <u-input v-model="formData.planname" placeholder="请输入计划名称" />
        </u-form-item>
        <u-form-item label="单据号:">
          <u-input v-model="formData.billno" placeholder="请输入单据号" />
        </u-form-item>
        <u-form-item label="预计提货时间:" required>
          <u-input @click="selectDateShow = true" disabled v-model="formData.expectdate" placeholder="请选择预计提货时间" />
        </u-form-item>
        <u-form-item label="时间段:" required>
          <u-input @click="periodShow = true" disabled v-model="perioName" placeholder="请选择时间段" />
        </u-form-item>
        <u-form-item label="备注:">
          <u-input v-model="formData.memo" placeholder="请输入备注" />
        </u-form-item>
        <!-- 使用上传组件，仅在formData.id存在时显示 -->
        <uploadFile :id="formData.id" :action="action" v-if="formData.id" />
      </u-form>
    </view>
    <u-picker v-model="selectDateShow" @confirm="handlerConfirmDate" mode="time"></u-picker>
    <u-select v-model="periodShow" :default-value="[perioDefaultValue]" :list="periodList"
      @confirm="confirmPeriod"></u-select>
    <SubmitBtn v-bind="confing" :formData="formData" />
  </view>
</template>

<style lang="scss" scoped>
.carinfo {
  min-height: 100vh;
  background: #f5f5f5;
  padding-top: 20rpx;

  .content {
    background: #fff !important;
    border-radius: 20rpx;
    padding: 0 40rpx;
    margin-bottom: 100rpx;
  }
}

::v-deep .uicon-plus {
  margin-top: 4rpx;
}

.more_list {
  width: 170rpx;
  padding-top: 30rpx;

  view {
    padding-bottom: 30rpx;
  }
}
</style>